<template>
  <el-main>

      <el-form :model="searchObject" ref="searchObject" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="searchObject.departmentName" placeholder="请输入一级部门名称" clearable></el-input>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh-right" @click="resetSearchObject">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openAddWindow">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px" row-key="id" default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="departmentName" label="部门名称"></el-table-column>
      <el-table-column prop="parentName" label="所属部门"></el-table-column>
      <el-table-column prop="phone" label="部门电话"></el-table-column>
      <el-table-column prop="address" label="部门地址"></el-table-column>
      <el-table-column label="操作选项" width="200" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button icon="el-icon-close" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <system-dialog
      :title="deptDialog.title"
      :visible="deptDialog.visible"
      :width="deptDialog.width"
      :height="deptDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm">
      <div slot="content">
        <el-form :model="dept" ref="deptForm" :rules="rules"
                 label-width="80px" :inline="true" size="small">
          <el-form-item label="所属部门" prop="parentName">
            <el-input v-model="dept.parentName" @click.native="selectDepartment" :readonly="true"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" prop="departmentName">
            <el-input v-model="dept.departmentName"></el-input>
          </el-form-item>
          <el-form-item label="部门电话">
            <el-input v-model="dept.phone"></el-input>
          </el-form-item>
          <el-form-item label="部门地址">
            <el-input v-model="dept.address"></el-input>
          </el-form-item>
          <el-form-item label="序号">
            <el-input v-model="dept.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>

    <system-dialog
      :title="parentDialog.title"
      :visible="parentDialog.visible"
      :width="parentDialog.width"
      :height="parentDialog.height"
      @onClose="parentOnClose"
      @onConfirm="parentOnConfirm">
      <div slot="content">
        <el-tree ref="parentTree" :data="treeList" node-key="id" :props="defaultProps" :default-expand-all="true"
                 :highlight-current="true" :expand-on-click-node="false" @node-click="handleNodeClick">
          <div class="customer-tree-node" slot-scope="{ node, data }">

<!--            <span v-if="data.children.length === 0">-->
<!--              <i class="el-icon-document" style="color: black"></i>-->
<!--            </span>-->

<!--            <span v-else @click="openBtn(data)">-->
<!--              <i v-if="data.open" class="el-icon-circle-plus-outline" style="color: red"></i>-->
<!--              <i v-else class="el-icon-remove-outline" style="color: green"></i>-->
<!--            </span>-->

<!--            <span style="margin-left: 4px">-->
<!--              {{ node.label }}-->
<!--            </span>-->

            <span v-if="data.children.length === 0">
              <i class="el-icon-document" style="color: black"></i>
            </span>

            <span v-else @click.stop="openBtn(data)">
              <i v-if="data.open" class="el-icon-circle-plus-outline" style="color: red"></i>
              <i v-else class="el-icon-remove-outline" style="color: green"></i>
            </span>

            <span style="margin-left: 2px">
              {{ node.label }}
            </span>

          </div>
        </el-tree>
      </div>
    </system-dialog>

  </el-main>
</template>

<script>

  import departmentApi from '@/api/department'
  //导入组件
  import systemDialog from '@/components/system/systemDialog.vue'
    export default {
        name: "department",
        //注册组件
        components: {
            systemDialog
        },
        data(){
            return{
                searchObject: {
                    departmentName: ""
                },
                tableData: [],
                deptDialog: {
                    title: "",
                    visible: false,
                    width: 560,
                    height: 170
                },
                dept: {
                    id: "",
                    pid: "",
                    parentName: "",
                    departmentName: "",
                    address: "",
                    phone: "",
                    orderNum: ""
                },
                rules: {
                    parentName: [{required: true, trigger: "change", message: "请选择所属部门"}],
                    departmentName: [{required: true, trigger: "blur", message: "请输入部门名称"}]
                },
                parentDialog: {
                    title: "",
                    visible: false,
                    width: 300,
                    height: 400
                },
                treeList: [],
                defaultProps: {
                    children: "children",
                    label: "departmentName",
                },
            }
        },
        created() {
            this.search()
        },
        methods: {
            async search(){
                let res = await departmentApi.getDepartmentList(this.searchObject);
                if(res.success){
                    this.tableData = res.data
                }
            },
            resetSearchObject(){
                this.searchObject = {};
                this.search()
            },
            handleEdit(row) {
                //数据回显
                this.$objCopy(row, this.dept);
                //设置窗口标题
                this.deptDialog.title = "编辑部门";
                //显示编辑部门窗口
                this.deptDialog.visible = true;
            },
            async handleDelete(row) {
                //查询部门下是否存在子部门或用户
                let result = await departmentApi.checkDepartment({id: row.id});
                //判断是否可以删除
                if (!result.success) {
                    //提示不能删除
                    this.$message.warning(result.message);
                } else {
                    //确认是否删除
                    let confirm = await this.$commonConfirm("确定要删除该数据吗?");
                    if (confirm) {
                        //发送删除请求
                        let res = await departmentApi.deleteById({id: row.id});
                        //判断是否成功
                        if (res.success) {
                            //成功提示
                            this.$message.success(res.message);
                            //刷新
                            this.search();
                        } else {
                            //失败提示
                            this.$message.error(res.message);
                        }
                    }
                }
            },
            openAddWindow() {
                //清空表单数据
                this.$resetForm("deptForm", this.dept);
                this.deptDialog.title = "新增部门";
                this.deptDialog.visible = true
            },
            onClose(){
                this.deptDialog.visible = false
            },
            onConfirm() {
                this.$refs.deptForm.validate(async (valid) => {
                    if (valid) {
                        let res = null;  //后端返回的数据
                        //判断部门ID是否有数据，如果部门ID为空，则表示新增，否则就是修改
                        if (this.dept.id === '') {
                            //发送新增请求
                            res = await departmentApi.addDept(this.dept)
                        } else {
                            //发送修改请求
                            res = await departmentApi.updateDept(this.dept)
                        }
                        if (res.success) {
                            this.$message.success(res.message);
                            this.search();
                            this.deptDialog.visible = false
                        } else {
                            this.$message.error(res.message)
                        }
                    }
                })
            },
            async selectDepartment() {
                this.parentDialog.visible = true;
                this.parentDialog.title = "请选择所属部门";
                let res = await departmentApi.getParentTreeList();
                if (res.success) {
                    this.treeList = res.data
                }
            },
            parentOnClose() {
                this.parentDialog.visible = false
            },
            parentOnConfirm() {
                this.parentDialog.visible = false
            },
            handleNodeClick(data) {
                this.dept.pid = data.id;
                this.dept.parentName = data.departmentName
            },
            openBtn(data) {
                data.open = !data.open;
                this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
            }
        }
    }
</script>

<style lang="scss" scoped>

  ::v-deep .el-tree {
    .el-tree-node {
      position: relative;
      padding-left: 10px;
    }

    .el-tree-node__children {
      padding-left: 20px;
    }

    .el-tree-node :last-child:before {
      height: 40px;
    }

    .el-tree > .el-tree-node:before {
      border-left: none;
    }

    .el-tree > .el-tree-node:after {
      border-top: none;
    }

    .el-tree-node:before, .el-tree-node:after {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .tree :first-child .el-tree-node:before {
      border-left: none;
    }

    .el-tree-node:before {
      border-left: 1px dotted #d9d9d9;
      bottom: 0px;
      height: 100%;
      top: -25px;
      width: 1px;
    }

    .el-tree-node:after {
      border-top: 1px dotted #d9d9d9;
      height: 20px;
      top: 14px;
      width: 24px;
    }

    .el-tree-node__expand-icon.is-leaf {
      width: 8px;
    }

    .el-tree-node__content > .el-tree-node__expand-icon {
      display: none;
    }

    .el-tree-node__content {
      line-height: 30px;
      height: 30px;
      padding-left: 10px !important;
    }
  }

  ::v-deep .el-tree > div {
    &::before {
      display: none;
    }

    &::after {
      display: none;
    }
  }
</style >
